<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="系统管理—部门管理"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="部门名称" v-model="a"></LInput>
      <LSelect label="部门属性" :value="c" @selected-event="getNewSelect1" :options="option1" style="margin-left: 16px"></LSelect>
      <LButton label="+新增" style="margin-left: 16px" @click="repairDialog = true"></LButton>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :default-sort="{prop:'b',order:ascending}" border>
      <el-table-column label="部门编码" prop="a" width="120" />
      <el-table-column label="部门名称" prop="b" />
      <el-table-column label="是否维修部门" prop="c" width="120" />
      <el-table-column label="上级部门" prop="d" width="100" />
      <el-table-column label="维保范围" prop="e" />
      <el-table-column label="部门属性" prop="f" />
      <el-table-column label="固定电话" prop="g" />
      <el-table-column label="排序" prop="i" width="100" />
      <el-table-column label="操作" width="260">
        <template #default>
          <el-button type="primary" size="mini" @click="repairDialog2 = true">编辑</el-button>
          <el-button type="info" size="mini" @click="repairDialog3 = true">维保范围管理</el-button>
          <el-button type="danger" size="mini" @click="del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="新增" width="40%" @close="repairDialogClose">
        <el-form label-width="80px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules" size="small">
          <div class="row-1">
            <el-form-item label="部门编码" prop="a" style="width:100%">
              <el-input v-model="repairForm.a"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="b" style="width:100%">
              <el-input v-model="repairForm.b"></el-input>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="维修部门" prop="c" style="width:100%">
              <div class="row-1-border">
                <el-radio v-model="repairForm.b" label="1" size="mini">是</el-radio>
                <el-radio v-model="repairForm.b" label="2" size="mini">否</el-radio>
              </div>
            </el-form-item>
            <el-form-item label="上级部门" prop="d" style="width:100%">
              <el-select v-model="repairForm.d" filterable style="width:100%">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="部门属性" prop="d" style="width:100%">
              <el-select v-model="repairForm.d" filterable style="width:100%">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="b" style="width:100%">
              <el-input v-model="repairForm.b"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 弹出框：编辑 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog2" title="编辑" width="40%" @close="repairDialog2Close">
        <el-form label-width="80px" :model="repairForm2" ref="repairForm2Ref" :rules="repairForm2Rules" size="small">
          <div class="row-1">
            <el-form-item label="部门编码" prop="a" style="width:100%">
              <el-input v-model="repairForm2.a"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="b" style="width:100%">
              <el-input v-model="repairForm2.b"></el-input>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="维修部门" prop="c" style="width:100%">
              <div class="row-1-border">
                <el-radio v-model="repairForm2.b" label="1" size="mini">是</el-radio>
                <el-radio v-model="repairForm2.b" label="2" size="mini">否</el-radio>
              </div>
            </el-form-item>
            <el-form-item label="上级部门" prop="d" style="width:100%">
              <el-select v-model="repairForm2.d" filterable style="width:100%">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="部门属性" prop="d" style="width:100%">
              <el-select v-model="repairForm2.d" filterable style="width:100%">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="b" style="width:100%">
              <el-input v-model="repairForm2.b"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repair2SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 弹出框：维保范围管理 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog3" title="维保范围管理" width="48%" @close="repairDialog3Close()">
        <div class="dialog-border">
          <div style="display:flex" class="dialog-border-padding">
            <!-- 左 -->
            <div>
              <el-form label-width="50px" :model="repairForm3" ref="repairForm3Ref" :rules="repairForm3Rules" size="small">
                <el-form-item label="搜索" prop="a" style="width:60%">
                  <el-input v-model="repairForm3.a"></el-input>
                </el-form-item>
                <el-button type="primary" size="mini" style="margin-bottom:1.5vh;" @click="addWeiBao">添加</el-button>
              </el-form>
              <el-table :data="subTableData1" style="width: 380px" :default-sort="{prop:'b',order:ascending}" border ref="subTable1Ref" @selection-change="subTable1Selected">
                <el-table-column type="selection" width="35" />
                <el-table-column label="名称" prop="a" />
                <el-table-column label="编码" prop="b" />
              </el-table>
            </div>
            <!-- 右 -->
            <div style="margin-left:2.5vw">
              <el-table :data="subTableData2" style="width: 380px" :default-sort="{prop:'b',order:ascending}" border ref="subTable2Ref">
                <el-table-column label="名称" prop="a" />
                <el-table-column label="编码" prop="b" />
                <el-table-column label="操作" width="80">
                  <template #default>
                    <el-button type="danger" size="mini">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repair3SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog3 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LButton from "../../../components/LButton.vue";
import LSelect from "@/components/LSelect.vue";
import Template from "@/views/OperaManage/Equipment/template.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
    LSelect,
    Template,
  },
  data() {
    return {
      a: "",
      b: "",
      c: "",
      d: "",
      option1: [
        {
          value: "1",
          label: "选项1",
        },
        {
          value: "2",
          label: "选项2",
        },
      ],
      tableData: [
        {
          a: "00",
          b: "机关事务局",
          c: "是",
          d: "0",
          e: "主楼,东辅楼,西辅楼,餐厅楼,市民楼",
          f: "",
          g: "0",
          h: "",
          i: "",
        },
      ],
      //=============================================
      repairDialog: false,
      repairForm: {},
      repairDialog2: false,
      repairForm2: {},
      repairDialog3: false,
      repairForm3: {},
      subTableData1: [
        {
          a: "主楼",
          b: "DDOO",
        },
        {
          a: "东辅楼",
          b: "DDO1",
        },
      ],
      subTable1Select: null,
      subTableData2: [],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //获取搜索栏信息
    getNewSelect1(s) {
      this.c = s;
    },
    //清空搜索栏
    clearSelected() {
      this.a = "";
      this.c = "";
    },
    //清空form表单
    repairDialogClose() {
      this.$refs.repairFormRef.resetFields(); //新增
    },
    repairDialog2Close() {
      this.$refs.repairForm2Ref.resetFields(); //编辑
    },
    repairDialog3Close(rows) {
      this.$refs.repairForm3Ref.resetFields(); //维保范围管理
      //清空多选
      if (rows) {
        rows.forEach((row) => {
          this.$refs.subTable1Ref.toggleRowSelection(row);
        });
      } else {
        this.$refs.subTable1Ref.clearSelection();
      }
      this.subTableData2 = [];
    },
    //多选表格当前选中值
    subTable1Selected(val) {
      console.log("选中项打印：", val);
      this.subTable1Select = val;
    },
    //添加维保信息
    addWeiBao() {
      this.subTableData2.push(...this.subTable1Select);
    },
    //删除数据按钮
    del() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>


<style lang="less" scoped>
@import "../../OperaManage/opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;

  .row-1-border {
    height: 31px;
    border: 1px solid #72aeff;
    border-radius: 5px;
    padding: 0 0 0 25px;
  }
}
</style>